<template>
  <view class="empty-state">
    <view class="empty-content">
      <!-- 空状态图标 -->
      <view class="empty-icon" v-if="icon">
        <text class="iconfont" :class="icon" :style="{ color: iconColor }"></text>
      </view>
      
      <!-- 空状态图片 -->
      <view class="empty-image" v-else-if="image">
        <image :src="image" class="image" mode="aspectFit" />
      </view>
      
      <!-- 默认图标 -->
      <view class="empty-icon" v-else>
        <text class="iconfont icon-empty" :style="{ color: iconColor }"></text>
      </view>
      
      <!-- 标题 -->
      <view class="empty-title" v-if="title">{{ title }}</view>
      
      <!-- 描述 -->
      <view class="empty-description" v-if="description">{{ description }}</view>
      
      <!-- 操作按钮 -->
      <view class="empty-actions" v-if="$slots.default || actionText">
        <slot>
          <button 
            v-if="actionText" 
            class="action-btn"
            :class="buttonType"
            @click="handleAction"
          >
            {{ actionText }}
          </button>
        </slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'EmptyState',
  props: {
    // 图标 class
    icon: {
      type: String,
      default: ''
    },
    // 图片路径
    image: {
      type: String,
      default: ''
    },
    // 图标颜色
    iconColor: {
      type: String,
      default: '#bfbfbf'
    },
    // 标题
    title: {
      type: String,
      default: '暂无数据'
    },
    // 描述
    description: {
      type: String,
      default: ''
    },
    // 操作按钮文本
    actionText: {
      type: String,
      default: ''
    },
    // 按钮类型
    buttonType: {
      type: String,
      default: 'primary' // primary | secondary | ghost
    }
  },
  methods: {
    handleAction() {
      this.$emit('action')
    }
  }
}
</script>

<style lang="scss" scoped>
.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96rpx 48rpx;
  min-height: 400rpx;
}

.empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 480rpx;
}

.empty-icon {
  margin-bottom: 32rpx;
  
  .iconfont {
    font-size: 120rpx;
  }
}

.empty-image {
  margin-bottom: 32rpx;
  
  .image {
    width: 240rpx;
    height: 180rpx;
  }
}

.empty-title {
  font-size: 32rpx;
  color: #262626;
  font-weight: 500;
  margin-bottom: 16rpx;
}

.empty-description {
  font-size: 26rpx;
  color: #8c8c8c;
  line-height: 1.5;
  margin-bottom: 48rpx;
}

.empty-actions {
  width: 100%;
}

.action-btn {
  padding: 24rpx 48rpx;
  border-radius: 16rpx;
  font-size: 28rpx;
  border: none;
  min-width: 200rpx;
  
  &.primary {
    background: #1890ff;
    color: white;
  }
  
  &.secondary {
    background: #f5f5f5;
    color: #595959;
  }
  
  &.ghost {
    background: transparent;
    color: #1890ff;
    border: 2rpx solid #1890ff;
  }
}
</style>